<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>黑马影视播放页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="./css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="./css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="./css/medile.css" rel='stylesheet' type='text/css'/>
    <link href="./css/single.css" rel="stylesheet" type="text/css"/>
    <link href="./aliplayer/aliplayer-min.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        .vip-join {
            color: #00c1de;
        }

        .vip_limit_content {
            display: flex;
            width: 100%;
            height: 100%;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }

        .vip_limit_content .title {
            font-size: 18px;
            line-height: 36px;
            color: #fff;
            text-align: center;
            width: 100%;
        }

        .vip_limit_button_box {
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            width: 100%;
        }

        .vip_limit_btn {
            display: inline-block;
            min-width: 100px;
            position: relative;
            background: #f60;
            padding: 0 35px;
            margin: 0px 5px 20px 5px;
            border-radius: 38px;
            font-size: 18px;
            line-height: 38px;
            color: #623A0C;
            text-align: center;
            background-image: linear-gradient(-135deg, #FBE8A8 0%, #F8E7AC 15%, #E2C078 100%);
            cursor: pointer;
        }

        .vip_limit_close {
            text-align: center;
        }

        .vip_limit_close span {
            display: inline-block;
            width: 40px;
            height: 40px;
            line-height: 36px;
            background: rgba(165, 165, 165, 0.54);
            border-radius: 50%;
            font-size: 24px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="app">
    <!--导航-->
    <div>
        <div class="header">
            <div class="container">
                <div class="w3layouts_logo">
                    <a href="/"><h1>黑马<span>影视</span></h1></a>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="movies_nav">
            <div class="container">
                <nav class="navbar navbar-default">
                    <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
                        <nav>
                            <ul class="nav navbar-nav">
                                <li class="active"><a href="/">首页</a></li>
                                <li v-for="(category,index) in categoryList"><a :href="'list.jsp?cid='+category.id">{{category.name}}</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </nav>
            </div>
        </div>
    </div>

    <!-- single -->
    <div class="single-page-agile-main" id="detail">
        <div class="container">
            <div class="agileits-single-top">
                <ol class="breadcrumb">
                    <li><a href="/">首页</a></li>
                    <li class="active">影视详情</li>
                </ol>
            </div>
            <div class="single-page-agile-info">
                <div class="show-top-grids-w3lagile">
                    <div class="single-left">
                        <div class="song">
                            <div class="song-info">
                                <h3>{{movie.name}}</h3>
                            </div>
                            <div class="video-grid-single-page-agileits">
                                <div class="prism-player" id="J_prismPlayer"></div>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>

    <!--尾部-->
    <div class="footer">
        <div class="container">
            <div class="w3ls_footer_grid">
                <div class="col-md-6 w3ls_footer_grid_left">
                    <div class="w3ls_footer_grid_left1">
                        <h2>订阅我们</h2>
                        <div class="w3ls_footer_grid_left1_pos">
                            <form action="#" method="post">
                                <input type="email" name="email" placeholder="你的邮箱..." required="">
                                <input type="submit" value="发送">
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 w3ls_footer_grid_right">
                    <a href="#"><h2>heima<span>Movies</span></h2></a>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./aliplayer/aliplayer-min.js"></script>
<script type="text/javascript" src="./aliplayer/aliplayercomponents-1.0.5.min.js"></script>
<script type="text/javascript" src="./js/axios-0.18.0.js"></script>
<script type="text/javascript" src="./js/vuejs-2.5.16.js"></script>
<!--Vue的代码写到这里-->
<script>
    const saveTime = function (memoryVideo, currentTime) {
        localStorage.setItem(memoryVideo, currentTime);
    };
    const getTime = function (memoryVideo) {
        return localStorage.getItem(memoryVideo)
    };

    const app = new Vue({
        el: '#app',
        data: {
            categoryList: [],
            movie: {},//接收影视详情
        },
        methods: {
            //导航列表
            findCategoryList() {
                axios.get('/portal/category/findAll').then(resp => {
                    this.categoryList = resp.data;
                })
            },

            //查询影视详情
            findMovieDetailById(movieId) {
                axios.get('/portal/movie/findById?id=' + movieId).then(resp => {
                    this.movie = resp.data;
                    let player = new Aliplayer({
                        id: 'J_prismPlayer',
                        width: '100%',
                        height: '500px',
                        autoplay: false,
                        controlBarVisibility: 'hover',
                        isLive: false,
                        components: [{
                            name: 'MemoryPlayComponent',
                            type: AliPlayerComponent.MemoryPlayComponent,
                            args: [false, getTime, saveTime]
                        }],
                        cover: this.movie.image,//图片
                        vid: this.movie.playId,//视频id
                        playauth: this.movie.playAuth,//视频播放秘钥
                        encryptType: 1, //是否加密播放
                    }, function (player) {
                        console.log('播放器创建好了。')
                    });
                })
            },
        },
        created() {
            //导航列表
            this.findCategoryList();

            //1. 获取到出入的movieId
            let movieId = location.search.split("=")[1];

            //2. 调用查询影视详情的方法
            this.findMovieDetailById(movieId);
        }
    })
</script>


</html>
